<template>
  <div class="container">
    <h2>文章列表</h2>
    <ol>
      <li v-for="(article, index) of articles" :key="index">
        {{ article.title }}
      </li>
    </ol>
    <nuxt-link v-if="pageNum > 1" :to="`/list?pageNum=${pageNum - 1}`">上一页</nuxt-link>
    <nuxt-link :to="`/list?pageNum=${pageNum + 1}`">下一页</nuxt-link>
  </div>
</template>

<script>
export default {
  middleware: 'login',
  async asyncData({app, query}) {
    const pageNum = parseInt(query.pageNum) || 1
    const pageSize = parseInt(query.pageSize) || 5

    const {data} = await app.$axios.get('http://localhost:8081/article', {
      params: {
        pageNum: pageNum,
        pageSize: pageSize
      }
    })

    return {
      articles: data,
      pageNum: pageNum,
      pageSize: pageSize
    }
  },
  watchQuery: true
}
</script>

<style>

</style>

